<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>左右选中.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
		<script type="text/javascript">
				$(function(){
					//移动一个
					$("#toRight1").click(function(){
							$("#left>option:selected:first").appendTo($("#right"));
					});
					
					//移动多个
					$("#toRight2").click(function(){
							$("#right").append($("#left option:selected"));
					});
					
					//移动全部
					$("#toRight3").click(function(){
							$("#right").append($("#left option"));
					});
				})
		</script>
	<style>
		input[type='button']{
			width:50px;
		}
	</style>
	</head>
	 
	<body>
		<table>
			<tr>
				<td>
					<select id="left" multiple="true" style="width:100px" size="10">
						<option>環</option>
						<option>芈</option>
						<option>琅</option>
						<option>琊</option>
						<option>爨</option>
						<option>甄</option>
						<option>槑</option>
						<option>夔</option>
						<option>嬲</option>
						<option></option>
					</select>
				</td>
				<td>
					<input type="button" value=">" id="toRight1"><br>
					<input type="button" value=">>" id="toRight2"><br>
					<input type="button" value=">>>" id="toRight3"><br><br>
					<input type="button" value="<" id="toLeft1"><br>
					<input type="button" value="<<" id="toLeft2"><br>
					<input type="button" value="<<<" id="toLeft3">
				</td>
				<td>
					<select id="right" multiple="true" style="width:100px" size="10">
						
					</select>
				</td>
			</tr>
		</table>
	</body>

</html>






